<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>公募基金详情</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/style.css">
	<script src="../../build/public/vue.js" charset="utf-8"></script>
	<script src="../../build/public/base.js" charset="utf-8"></script>
</head>
<body>
	<div id="container" style="padding-bottom:50px;">
		<div class="detail-3-top">
			<p class="pro-name">{{productInfo.name | formatEmpty }}</p>
			<div class="pro-value">
				<span>{{proDetail.nearYearApr |formatNum('','%') | formatEmpty}}</span>
				<i>近一年涨跌幅</i>
			</div>
			<div class="pro-public" style="padding:10px 0;">
				<ul class="clear-fix">
					<li>
						<span>最新净值</span>
						<i>{{proDetail.todayNetvalue | percentAge  | formatEmpty}}</i>
					</li>
					<li>
						<span>起购金额</span>
						<i v-if="productInfo.minimumInvestment == '0'">--</i>
						<i v-else>{{productInfo.minimumInvestment/100 |formatNum('','元')  | formatEmpty}}</i>
					</li>
				</ul>
			</div>
		</div>
		<div class="public-chart">
			<ul class="chart-top-btn clear-fix">
				<li @click="historyData(1)" :class="{active:topTab}">单位净值</li>
				<li @click="historyData(2)" :class="{active:!topTab}">历史收益率</li>
			</ul>
			<div id="lineChart"></div>
			<ul class="chart-bottom-btn clear-fix">
				<li
					@click="netvalueTab('A_MONTH')" :class="{active:netvalueday=='A_MONTH'}">
					近1个月
				</li>
				<li
					@click="netvalueTab('THREE_MONTH')" :class="{active:netvalueday=='THREE_MONTH'}">
					近3个月
				</li>
				<li
				@click="netvalueTab('ONE_YEAR')" :class="{active:netvalueday=='ONE_YEAR'}">
					近1年
				</li>
				<li
				@click="netvalueTab('')"
				:class="{active:netvalueday==''}">
					成立以来
				</li>
			</ul>
		</div>
		<div class="detail-4-list">
			<dl>
				<dt>产品概述</dt>
				<dd>
					{{ productInfo.introduction  | formatEmpty  }}
				</dd>
			</dl>
			<dl>
				<dt>
					<a  :href="'product_3_value.html?idStr='+proDetail.idStr">
						净值
					</a>
					<span class="iconfont">&#xe61d;</span>
				</dt>
				<dd>
					<table class="detail-4-list-col4">
						<tr>
							<td>日期</td>
							<td>单位净值</td>
							<td>累计净值</td>
							<td>日涨幅</td>
						</tr>
						<tr>
							<th class="netValueDate">{{ net_netValueDate[0] | formatTime }}</th>
							<th class="netValue">{{ net_netValues[0] | |formatRadix }}</th>
							<th class="accumulatedNet">{{ net_accumulatedNet[0] | formatRadix }}</th>
							<th class="riseDecline">{{ net_riseDecline[0] | formatNum('','%')}}</th>
						</tr>
						<tr>
							<th class="netValueDate">{{ net_netValueDate[1] | formatTime }}</th>
							<th class="netValue">{{ net_netValues[1] | formatRadix }}</th>
							<th class="accumulatedNet">{{ net_accumulatedNet[1] | formatRadix }}</th>
							<th class="riseDecline">{{ net_riseDecline[1] | formatNum('','%') }}</th>
						</tr>
					</table>
				</dd>
			</dl>

			<dl>
				<dt>分红</dt>
				<dd>
					<table>
						<tr>
							<td>日期</td>
							<td>每份分红</td>
						</tr>
						<tr v-for="item in dividend">
							<th>{{ item.dividendDate }}</th>
							<th>{{ item.amount  | formatRadix }}</th>
						</tr>
					</table>
				</dd>
			</dl>
			<dl class="split">
				<dt>拆分</dt>
				<dd>
					<table>
						<tr>
							<td>日期</td>
							<td>拆分前净值</td>
							<td>拆分后净值</td>
							<td>拆分比例</td>
						</tr>
						<tr v-for="item in split">
							<th>{{ item.splitDate }}</th>
							<th>{{ item.previousNetValue  | formatRadix}}</th>
							<th>{{ item.followNetValue  | formatRadix}}</th>
							<th>{{ item.scale }}</th>
						</tr>
					</table>
				</dd>
			</dl>
			<dl>
				<dt>
					<a :href="'product_3_more.html?idStr='+idStr">
						基金详情
						<span class="iconfont">&#xe61d;</span>
					</a>
				</dt>
			</dl>
		</div>
		<div class="btn-buttom" style="display: none;">
			<button type="button" class="contact" onclick="window.location.href='../mine/planner.html'">立即购买</button>
			<button type="button" class="purchase">分享</button>
		</div>
	</div>
<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
<script src="../../build/public/echarts.min.js" charset="utf-8"></script>
<script src="../../build/js/publicMoney.chart.option.js" charset="utf-8"></script>
<script src="../../build/js/config.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:'#container',
		data:{
			valueOne:['12','213','167','224'],                            //模拟数据
			valueTwo:['2017-5-14','2017-5-15','2017-5-16','2017-5-17'],   //模拟数据
			One:['200','113','167','124'],                                //模拟数据
			Two:['2017-5-14','2017-5-15','2017-5-16','2017-5-17'],        //模拟数据
			proDetail:'',
			productInfo:'',
			netvalueday:'A_MONTH',                                   //初始请求数据字段
			topTab:true,
			chartIdStr:'',
			dateList:[],
			valueList:[],
			accumulatedNet:[],
			historyIncomeRateList :[],
			idStr:'',
			net_netValueDate:[],
			net_netValues :[],
			net_accumulatedNet :[],
			net_riseDecline :[],
			net_idStr:'',
			dividend:[],
			split:[],
		},
		mounted:function(){
			this.$nextTick(function(){
				vm.idStr = this.getParameter('idStr');
				vm.getDetailData();
			})
		},
		methods:{
			getDetailData:function(callback){										//获取数据
				var url = "/product/publicFund/detail"            //公募基金详情
				get(url,{idStr:vm.idStr},function(res){
					vm.proDetail = res.data;  //数据赋值
					vm.productInfo = res.data.product;
					vm.net_idStr = res.data.idStr;
					vm.chartIdStr = res.data.idStr;
					// 产品概念  接口接错 待修正
					vm.publicFundChart();
					vm.getNetValue();
					vm.getDividend();
					vm.getSpilit();
				})
			},
			publicFundChart:function(){
				var url = "/product/publicFund/net-value/history";  //根据期限获取获取年化收益率
				get(url,{
					idStr:vm.chartIdStr,
					timeDistance:vm.netvalueday,
				},function(res){
					vm.dateList = timeStampListConvert(res.data.dateList);     // 日期
					vm.valueList = res.data.valueList;   // 净值
					vm.historyIncomeRateList  = res.data.historyIncomeRateList ;    //  历史收益率
					var viewDateList;
					var viewValueList;
				//	console.log(res.data.dateList.length);
					if(res.data.dateList.length == 0){
						viewDateList = new Array();
						viewDateList.push(formatTime(new Date()));
						viewValueList = new Array();
						viewValueList.push(0);
					//	console.log(viewDateList);
					//	console.log(viewValueList);
						vm.ininChart(viewValueList,viewDateList);
					}
					else{
						vm.ininChart(vm.valueList,vm.dateList);         //传入数据，初始化图表
					}
				})
			},
			// 获取净值列表
			getNetValue:function (callback) {
				var url = "/product/publicFund/fundnetvaluepage"            //公募基金详情
				get(url,{
					currentPage:1,
					publicFundId:vm.net_idStr,
					startDay:'',
					endDay:'',
				},function (res) {
					vm.net_netValueDate.push(res.data.resultList[0].netValueDate );
					vm.net_netValues.push(res.data.resultList[0].netValue);
					vm.net_accumulatedNet.push(res.data.resultList[0].accumulatedNet);
					vm.net_riseDecline.push(res.data.resultList[0].riseDecline );
					vm.net_netValueDate.push(res.data.resultList[1].netValueDate );
					vm.net_netValues.push(res.data.resultList[1].netValue);
					vm.net_accumulatedNet.push(res.data.resultList[1].accumulatedNet);
					vm.net_riseDecline.push(res.data.resultList[1].riseDecline );
					// var date = document.getElementsByClassName('netValueDate');
					// var value = document.getElementsByClassName('netValue');
					// var accumulate = document.getElementsByClassName('accumulatedNet');
					// var rise = document.getElementsByClassName('riseDecline');
					// console.log('test'+vm.net_accumulatedNet[0])
					/*
					 for(var i = 0; i<2; i++){
					 if(vm.net_netValueDate[i] == undefined){
					 date[i].innerHTML = '--';
					 }
					 if(vm.net_netValues[i] == undefined){
					 value[i].innerHTML('--');
					 }
					 if(vm.net_accumulatedNet[i] == undefined){
					 accumulate[i].innerHTML = '--';
					 }
					 if(vm.net_riseDecline[i] == undefined){
					 rise[i].innerHTML = '--';
					 }
					 }
					*/
					// console.log('净值'+ vm.net_netValues);
					//  vm.profitList = res.data.resultList;
				})
			},
			// 获取分红列表
			getDividend:function (callback) {
				var url = "/product/publicFund/fund-dividend/list"            //公募基金详情
				get(url,{
					idStr:vm.chartIdStr,
				},function (res) {
					vm.dividend = res.data;
					if(res.data.length == 0){
						vm.dividend = [{'dividendDate':'--','amount':'--'}];
					}
				});
			},
			// 获取拆分列表
			getSpilit:function (callback) {
				var url = "/product/publicFund/fund-split/list"            //公募基金详情
				get(url,{
					idStr:vm.chartIdStr,
				},function (res) {
					vm.split = res.data;
					if(res.data.length == 0){
						vm.split = [{'splitDate':'--','previousNetValue':'--','followNetValue':'--','scale':'--'}];
					}
				});
			},
			historyData:function(type){    //单位净值和历史收益率的切换
				switch(type){
					case 1:
						vm.topTab = true;
						var viewDateList;
						var viewValueList;
						if(vm.dateList.length == 0){
							viewDateList = new Array();
							viewDateList.push(formatTime(new Date()));
							viewValueList = new Array();
							viewValueList.push(0);
							console.log(viewDateList);
							console.log(viewValueList);
							vm.ininChart(viewValueList,viewDateList);
						}
						else{
							vm.ininChart(vm.valueList,vm.dateList);        //传入数据，初始化图表
						}
						// vm.publicFundChart()
						break
					case 2:
						vm.topTab = false;
						var viewDateList;
						var viewValueList;
						if(vm.dateList.length == 0){
							viewDateList = new Array();
							viewDateList.push(formatTime(new Date()));
							viewValueList = new Array();
							viewValueList.push(0);
							console.log(viewDateList);
							console.log(viewValueList);
							vm.ininChart(viewValueList,viewDateList);
						}
						else{
							vm.ininChart(vm.historyIncomeRateList ,vm.dateList);        //传入数据，初始化图表
						}
						// vm.publicFundChart()
						break
				}
			},
			netvalueTab:function(type){     //周期选择（初始为NUM_ONEMONTH，成立以来为空 ''）
				vm.netvalueday = type;
				vm.publicFundChart();
			},
			ininChart:function(one,two){    //传入数据，重置图表
				var indexChart = echarts.init(document.getElementById('lineChart'));
				indexChart.setOption(chartOption(one,two));
			},
			getParameter:function(name){    //获取链接中参数
				var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     			var r = window.location.search.substr(1).match(reg);
     			if(r!=null)return  unescape(r[2]); return null;
			},
		}
	})
</script>
</body>
</html>
